<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JQzoom 2 Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/jquery-1.6.js" type="text/javascript"></script>
<script src="../js/jquery.jqzoom-core-pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">
<style type="text/css">
.rot_box{width:512px; margin:0 auto;}
.image_box{text-align:center;}
.image_box img{margin-top:-150px;}
</style>
<style type = "text/css">

body{margin:0px;padding:0px;font-family:Arial;}
a img,:link img,:visited img { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: none; }
*{margin:0;padding:0;}
p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
dl dd{margin:0px;}
dl dt{}

.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}


ul#thumblist{display:block;}
ul#thumblist li{float:left;margin-right:2px;list-style:none;}
ul#thumblist li a{display:block;border:1px solid #CCC;}
ul#thumblist li a.zoomThumbActive{
    border:1px solid red;
}

.jqzoom{

	text-decoration:none;
	float:left;
}





</style>

<script type="text/javascript">

$(document).ready(function() {
	$('.jqzoom').jqzoom({
            zoomType: 'standard',
            lens:true,
            preloadImages: true,
            zoomWidth: 250,
            zoomHeight: 250,
            alwaysOn:false
        });
	
});


</script>

<script type="text/javascript">
window.onload = function(){
	var param = {
		right: document.getElementById("rotRight"),
		left: document.getElementById("rotLeft"),
		img: document.getElementById("rotImg"),
		cv: document.getElementById("canvas"),
		rot: 0
	};
	var rotate = function(canvas,img,rot){
		//获取图片的高宽
		var w = img.width;
		var h = img.height;
		//角度转为弧度
		if(!rot){
			rot = 0;	
		}
		var rotation = Math.PI * rot / 180;
		var c = Math.round(Math.cos(rotation) * 1000) / 1000;
		var s = Math.round(Math.sin(rotation) * 1000) / 1000;
		//旋转后canvas标签的大小
		canvas.height = Math.abs(c*h) + Math.abs(s*w);
		canvas.width = Math.abs(c*w) + Math.abs(s*h);
		//绘图开始
		var context = canvas.getContext("2d");
		context.save();
		//改变中心点
		if (rotation <= Math.PI/2) {
			context.translate(s*h,0);
		} else if (rotation <= Math.PI) {
			context.translate(canvas.width,-c*h);
		} else if (rotation <= 1.5*Math.PI) {
			context.translate(-c*w,canvas.height);
		} else {
			context.translate(0,-s*w);
		}
		//旋转90°
		context.rotate(rotation);
		//绘制
		context.drawImage(img, 0, 0, w, h);
		context.restore();
		img.style.display = "none";	
	}
	var fun = {
		right: function(){
			param.rot += 90;
			rotate(param.cv, param.img, param.rot);
			if(param.rot === 270){
				param.rot = -90;	
			}	
		},
		left: function(){
			param.rot -= 90;
			if(param.rot === -90){
				param.rot = 270;	
			}
			rotate(param.cv, param.img, param.rot);			
		}
	};
	param.right.onclick = function(){
		fun.right();
		return false;
	};
	param.left.onclick = function(){
		fun.left();
		return false;
	};
};
</script>
</head>

<body>
<div class="rot_box">
<a id="rotLeft" class="l" href="javascript:void(0);">&lt;&lt;向左转</a>&nbsp;&nbsp;&nbsp;<a id="rotRight" class="r" href="javascript:void(0);">向右转&gt;&gt;</a>

    
       	 <a href="imgProd/triumph_big1.jpg" id="imgProd" class="jqzoom" rel='gal1'  title="triumph" style="height:250px;width:250px;" >
            <div class="image_box">
            <canvas id="canvas"></canvas>
            <img src="imgProd/triumph_big1.jpg"  title="triumph" id="rotImg"  style="border: 1px solid #666;width:250px;height:250px">
            </div>
        </a>
    </div>
	<br/>

</body></html>